<template>
  <div class="scroll-container">
    <h2>无缝滚动效果展示</h2>
    
    <div class="scroll-section">
      <h3>1. 垂直滚动列表</h3>
      <div class="scroll-box">
        <vue-seamless-scroll :data="verticalList" :class-option="verticalOption" class="scroll-list">
          <ul>
            <li v-for="(item, index) in verticalList" :key="index">
              {{ item.title }}
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>

    <div class="scroll-section">
      <h3>2. 水平滚动列表</h3>
      <div class="scroll-box">
        <vue-seamless-scroll :data="horizontalList" :class-option="horizontalOption" class="scroll-list horizontal">
          <ul>
            <li v-for="(item, index) in horizontalList" :key="index">
              {{ item.title }}
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>

    <div class="scroll-section">
      <h3>3. 单行滚动</h3>
      <div class="scroll-box">
        <vue-seamless-scroll :data="singleLineList" :class-option="singleLineOption" class="scroll-list single-line">
          <div class="single-line-content">
            <span v-for="(item, index) in singleLineList" :key="index">
              {{ item.title }}
            </span>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>

    <div class="scroll-section">
      <h3>4. 表格滚动</h3>
      <div class="scroll-box">
        <vue-seamless-scroll :data="tableData" :class-option="tableOption" class="scroll-list">
          <table class="scroll-table">
            <thead>
              <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>地址</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tableData" :key="index">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.age }}</td>
                <td>{{ item.address }}</td>
              </tr>
            </tbody>
          </table>
        </vue-seamless-scroll>
      </div>
    </div>

    <div class="scroll-section">
      <h3>5. 图片轮播</h3>
      <div class="scroll-box">
        <vue-seamless-scroll :data="imageList" :class-option="imageOption" class="scroll-list horizontal">
          <div class="image-list">
            <div v-for="(item, index) in imageList" :key="index" class="image-item">
              <img :src="item.url" :alt="item.title">
              <p>{{ item.title }}</p>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: 'ScrollEffectDemo',
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      // 垂直滚动列表数据
      verticalList: [
        { title: '垂直滚动项目 1' },
        { title: '垂直滚动项目 2' },
        { title: '垂直滚动项目 3' },
        { title: '垂直滚动项目 4' },
        { title: '垂直滚动项目 5' },
        { title: '垂直滚动项目 6' },
        { title: '垂直滚动项目 7' },
        { title: '垂直滚动项目 8' }
      ],
      // 水平滚动列表数据
      horizontalList: [
        { title: '水平滚动项目 1' },
        { title: '水平滚动项目 2' },
        { title: '水平滚动项目 3' },
        { title: '水平滚动项目 4' },
        { title: '水平滚动项目 5' },
        { title: '水平滚动项目 6' },
        { title: '水平滚动项目 7' },
        { title: '水平滚动项目 8' }
      ],
      // 单行滚动数据
      singleLineList: [
        { title: '单行滚动内容 1' },
        { title: '单行滚动内容 2' },
        { title: '单行滚动内容 3' },
        { title: '单行滚动内容 4' },
        { title: '单行滚动内容 5' },
        { title: '单行滚动内容 6' },
        { title: '单行滚动内容 7' },
        { title: '单行滚动内容 8' }
      ],
      // 表格数据
      tableData: [
        { id: 1, name: '张三', age: 25, address: '北京市朝阳区' },
        { id: 2, name: '李四', age: 30, address: '上海市浦东新区' },
        { id: 3, name: '王五', age: 28, address: '广州市天河区' },
        { id: 4, name: '赵六', age: 35, address: '深圳市南山区' },
        { id: 5, name: '钱七', age: 40, address: '杭州市西湖区' },
        { id: 6, name: '孙八', age: 32, address: '成都市武侯区' },
        { id: 7, name: '周九', age: 27, address: '武汉市江汉区' },
        { id: 8, name: '吴十', age: 45, address: '南京市鼓楼区' }
      ],
      // 图片轮播数据
      imageList: [
        { title: '图片1', url: 'https://picsum.photos/200/150?random=1' },
        { title: '图片2', url: 'https://picsum.photos/200/150?random=2' },
        { title: '图片3', url: 'https://picsum.photos/200/150?random=3' },
        { title: '图片4', url: 'https://picsum.photos/200/150?random=4' },
        { title: '图片5', url: 'https://picsum.photos/200/150?random=5' },
        { title: '图片6', url: 'https://picsum.photos/200/150?random=6' }
      ]
    }
  },
  computed: {
    // 垂直滚动配置
    verticalOption() {
      return {
        step: 0.5, // 步长
        limitMoveNum: 2, // 开始无缝滚动的数据量
        hover: true, // 鼠标悬停时暂停
        direction: 1, // 1: 向上, 0: 向下
        autoPlay: true, // 自动播放
        interval: 3, // 播放间隔
        singleHeight: 0, // 单步运动停止的高度
        singleWidth: 0, // 单步运动停止的宽度
        waitTime: 1000 // 单步运动停止的时间
      }
    },
    // 水平滚动配置
    horizontalOption() {
      return {
        step: 0.5,
        limitMoveNum: 2,
        hover: true,
        direction: 0, // 0: 向左, 1: 向右
        autoPlay: true,
        interval: 3,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 1000
      }
    },
    // 单行滚动配置
    singleLineOption() {
      return {
        step: 0.5,
        limitMoveNum: 2,
        hover: true,
        direction: 0,
        autoPlay: true,
        interval: 3,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 1000
      }
    },
    // 表格滚动配置
    tableOption() {
      return {
        step: 0.5,
        limitMoveNum: 2,
        hover: true,
        direction: 1,
        autoPlay: true,
        interval: 3,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 1000
      }
    },
    // 图片轮播配置
    imageOption() {
      return {
        step: 0.5,
        limitMoveNum: 2,
        hover: true,
        direction: 0,
        autoPlay: true,
        interval: 3,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 1000
      }
    }
  }
}
</script>

<style scoped>
.scroll-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  overflow: auto;
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.scroll-section {
  margin-bottom: 40px;
}

h3 {
  margin-bottom: 15px;
  color: #666;
  font-size: 18px;
}

.scroll-box {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.scroll-list {
  height: 200px;
  overflow: hidden;
}

.scroll-list.horizontal {
  height: auto;
}

.scroll-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.scroll-list li {
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s;
}

.scroll-list li:hover {
  background-color: #f5f7fa;
}

.single-line-content {
  white-space: nowrap;
  padding: 10px 0;
}

.single-line-content span {
  display: inline-block;
  margin-right: 30px;
  padding: 5px 10px;
  background-color: #f0f2f5;
  border-radius: 4px;
}

.scroll-table {
  width: 100%;
  border-collapse: collapse;
}

.scroll-table th,
.scroll-table td {
  padding: 10px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.scroll-table th {
  background-color: #f5f7fa;
  font-weight: bold;
}

.image-list {
  display: flex;
  padding: 10px 0;
}

.image-item {
  margin-right: 20px;
  text-align: center;
}

.image-item img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-item p {
  margin-top: 8px;
  color: #666;
}
</style> 